<template>
	<el-dialog title="更换餐台" :visible.sync="turnDeskVisible" :close-on-click-modal="false" width="60%" center>
			<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<div>
					<el-tabs type="card" v-model="activeName" @tab-click="querySeatById">
						<el-tab-pane label="全部" name="0">
							<el-row :gutter="12">
								<el-col :span="3" v-for="item in dinningTableList" :key="item.id">
									<a style="cursor: pointer;text-decoration: none;" @click="selectDiningTable(item)">
										<el-card :shadow="shadow" :style="'background-color:' + item.style">
											<div class="tableName">{{ item.diningTableNo }}</div>
											<br />
											<div class="seatNum">{{ item.seatNum }}人桌</div>
											<br />
										</el-card>
									</a>

									<br />
								</el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane v-for="item in regionList" :key="item.id" :label="item.regionName" :name="item.id">
							<el-row :gutter="12">
								<el-col :span="3" v-for="items in dinningTableList" :key="items.id">
									<a style="cursor: pointer;text-decoration: none;" @click="selectDiningTable(items)">
										<el-card :shadow="shadow" :style="'background-color:' + items.style">
											<div class="tableName">{{ items.diningTableNo }}</div>
											<br />
											<div class="seatNum">{{ items.seatNum }}人桌</div>
											<br />
										</el-card>
									</a>
									<br />
								</el-col>
							</el-row>
						</el-tab-pane>
            <el-pagination
              style="text-align: center;"
              background
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="32"
              :page-size="pageSize"
              :total="totalPage"
              layout="prev, next"
            ></el-pagination>
					</el-tabs>
				</div>
			</el-col>
		</el-row>
	</div>
	</el-dialog>

</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			seatNumList: [],
			regionList: [],
			activeName: '0',
			dinningTableList: [],
			shadow: 'never',
			KeyBoardVisible: false,
			PayComponentVisible: false,
			diningTableNo: '',
			eatNumber: '',
			orderNo: '',
			foodList: [],
			dataForm: {
				orderId: '',
				deskId: '',
				peopleNum: '',
				openTime: ''
			},
			openDeskInfo: null,
			orderInfo: '',
			clickCardCss: '',
			foodInfo: null,
			turnDeskVisible:false,
      pageIndex: 1,
      pageSize: 40,
      totalPage: 0,
		};
	},
	created() {

	},
	methods: {

		init(info){
			this.turnDeskVisible = true
			this.sourceInfo = info
			this.reserveInfo = info
			this.getDataList();
		},

    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },

		//选择餐台
		selectDiningTable(item) {
			var foodVos = JSON.parse(this.reserveInfo.foodList);
			this.reserveInfo.foodVos = foodVos;
			this.$confirm('你确定将'+this.sourceInfo.diningTableNo+'桌转至'+item.diningTableNo+'桌吗', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http({
						url: this.$http.adornUrl(`/reception/tstorereservedesk/openDesk`),
						method: 'post',
						data: this.$http.adornData({
							peopleNum: this.reserveInfo.peopleNum,
							foodVos: this.reserveInfo.foodVos,
							id: this.reserveInfo.id,
							diningTableNo: this.reserveInfo.diningTableNo,
							totalMoney: this.reserveInfo.totalMoney,
							deskId: item.id
						})
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500
							});
							this.turnDeskVisible = false;
							this.$emit("refreshData")
						} else {
							this.$message.error(data.msg);
						}
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消转台'
					});
				});
		},

		querySeatById(tab, event) {
      if (this.pageIndex > 1) {
        this.pageIndex = 1;
      }
			var status = 1
			this.$http({
				url: this.$http.adornUrl('/store/tstorediningtable/querySeatById'),
				method: 'get',
				params: this.$http.adornParams({
					status:status,
					storeTypeId: this.sourceInfo.storeTypeId,
					seatNum: 0,
					regionId: tab.name,
          page: this.pageIndex,
          limit: this.pageSize
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dinningTableList = data.data.dinningTableList.records;
          this.totalPage = data.data.dinningTableList.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		},

		getDataList() {
			this.$http({
				url: this.$http.adornUrl('/store/tstorediningtable/listSeat'),
				method: 'get',
				params: this.$http.adornParams({
					status:1,
					storeTypeId: this.sourceInfo.storeTypeId,
          seatNum: 0,
          regionId: '',
          page: this.pageIndex,
          limit: this.pageSize
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.data;
					this.seatNumList = data.data.seatNumList;
					this.regionList = data.data.regionList;
					this.dinningTableList = data.data.dinningTableList.records;
          this.totalPage = data.data.dinningTableList.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		}
	}
};
</script>

<style>
.tableName {
	display: -moz-box; /*兼容Firefox*/
	display: -webkit-box; /*兼容FSafari、Chrome*/

	-moz-box-align: center; /*兼容Firefox*/
	-webkit-box-align: center; /*兼容FSafari、Chrome */

	-moz-box-pack: center; /*兼容Firefox*/
	-webkit-box-pack: center; /*兼容FSafari、Chrome */

	font-size: 18px;
	font-weight: 3000;
}
.seatNum {
	text-align: center;
}

.footer {
	height: 100px;

	width: 100%;

	background-color: #ddd;

	position: fixed;

	bottom: 0;
}
.cursor {
	cursor: pointer;
	text-decoration: none;
}
</style>
